<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .warp {
            height: 100px;
            width: 300px;
            border: 1px solid red;
            position: relative
        }

        .reply {
            position: absolute;
            right: 5px;
            top: 5px;
            background-color: #009933;
            color: white
        }

        .message {
            position: absolute;
            left: 10px;
            top: 25px;
        }

        .reply2 {
            position: absolute;
            left: 10px;
            top: 40px;
        }
    </style>
</head>
<body>
<textarea id="area" rows="5" cols="50"></textarea>

<button id="btn">提交</button>
<br>
<span>老板您好 还能输入<span style="color: red" id="total">10</span>字</span>
<div id="main"
     style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;background: rgba(199,199,199,0.8);display: none">
    <div id="content"
         style="height: 500px;width: 500px;background-color: #009933;position:absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto">
        <textarea id="replyContent" rows="20" cols="40"></textarea><br>
        <button id="submit">提交</button>
    </div>
</div>
</body>
<script>
    var area = document.getElementById("area");
    var totalSpan = document.getElementById("total");
    var total = totalSpan.innerHTML * (1);
    var replyList = document.getElementsByClassName("reply");
    var main = document.getElementById("main");
    var submit = document.getElementById("submit");
    var replyContent = document.getElementById("replyContent");
    var btn = document.getElementById("btn");

    btn.onclick = function () {//根据内容生成留言板
        var content = area.value;
        var date = new Date();
        var dateStr = date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒";
        var layer = document.getElementsByClassName("warp").length;

        var warp = document.createElement("div");
        warp.className = "warp";

        var span1 = document.createElement("span");
        span1.setAttribute("style", "position: absolute;left:5px;top: 5px;");
        span1.innerHTML = dateStr;
        warp.appendChild(span1);


        var span2 = document.createElement("span");
        span2.className = "reply";
        span2.setAttribute("data-info", layer);
        span2.innerHTML = "回复";
        warp.appendChild(span2);
        bandClick(span2);

        var span3 = document.createElement("span");
        span3.className = "message";
        span3.id = "message_" + layer;
        span3.innerHTML = content;
        warp.appendChild(span3);

        var span4 = document.createElement("span");
        span4.id = "replyContent_" + layer;
        span4.className = "reply2";
        warp.appendChild(span4);
        document.body.appendChild(warp);
    }


    function bandClick(obj) {
        obj.onclick = function () {
            main.style.display = "block";
            var index = this.getAttribute("data-info");
            submit.index = index;

        }
    }

    submit.onclick = function () {
        var replycontent = replyContent.value;
        var index = this.index;
        var target = document.getElementById("replyContent_" + index);
        target.innerHTML = replycontent;
        main.style.display = "none";
        replyContent.value = " ";
    }


    document.onkeydown = document.onkeyup = function () { //键盘按下之后做什么
        var length = area.value.length;
        var balance = total - length;
        if (balance < 0) {
            area.value = area.value.substring(0, total);
            return false;
        }
        totalSpan.innerHTML = balance;
    }
    document.onkeydown = function (ev) {
        var evt = window.event || ev;
        var code = evt.keyCode || evt.which;
        if (evt.altKey && code == 13) {
            alert(area.value);
        }
    }
</script>
</html>